<template>
  <div class="leftBottom">
    <TITLESS cnt="设备状态统计">
      <span>设备状态统计 </span>
    </TITLESS>
    <Echart :options="chartOptions" height="90%"></Echart>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue'
import TITLESS from '@/components/TITLESS.vue'
import Echart from '@/components/echart/index.vue'

const props = defineProps({
  status: {
    type: Object,
    default: () => {
      return {
        normalCount: 0,
        total: 0,
        warnCount: 0,
      }
    },
  },
})
let dataObj = {}
watch(
  () => props.status,
  curr => {
    dataObj = curr
    getDevices()
  },
  { deep: true },
)

let list = []
let maxIndex = 0
let maxData = 0
function getDevices() {
  list = [
    {
      name: '正常',
      value: dataObj.normalCount,
      itemStyle: {
        color: '#4A98DA',
      },
    },
    {
      name: '报警',
      value: dataObj.warnCount,
      // value: 10,
      itemStyle: {
        color: '#FF6E77',
      },
    },
  ]
  list.forEach((e, i) => {
    if (e.value >= maxData) {
      maxIndex = i
      maxData = e.value
    }
  })
  initChart()
}
let chartOptions = ref()

function initChart() {
  chartOptions.value = {
    tooltip: {
      trigger: 'item',
      backgroundColor: '#044c73',
      borderColor: '#044c73',
      textStyle: {
        color: '#fff',
      },
      formatter: function (params) {
        return `${params.data.name}：${params.data.value}`
      },
    },
    legend: {
      orient: 'vertical',
      top: 'center',
      right: 20,
      itemGap: 20,
      textStyle: {
        color: 'rgba(209, 234, 255, 1)',
        fontSize: 16,
        fontWeight: 400,
        fontFamily: 'Arial',
      },
      formatter: function (name) {
        const item = list.find(i => {
          return i.name === name
        })
        let sum = dataObj.total
        let val = item.value || 0
        const p = val ? ((item.value / sum) * 100).toFixed(1) : 0
        return `${name}  ${p}%  (${val}) `
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['30%', '60%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
        itemStyle: {
          borderWidth: 10,
          borderColor: 'transparent',
        },
        label: {
          normal: {
            // normal 是图形在默认状态下的样式
            show: true,
            position: 'center',
            color: '#D1EAFF',
            fontSize: 20,
            fontWeight: '500',
            formatter: `{t|${dataObj.total}}\n{n|总数}`,
            rich: {
              t: {
                color: '#D1EAFF',
                fontSize: 36,
                lineHeight: 53,
              },
              n: {
                color: '#D1EAFF',
                fontSize: 18,
              },
            },
          },
          emphasis: {
            show: true,
            color: '#D1EAFF',
            fontSize: 20,
            fontWeight: '500',
            formatter: function (e) {
              if (e.dataIndex == maxIndex) {
                return `{t|${dataObj.total}}\n{n|总数}`
              } else {
                return ''
              }
            },
            rich: {
              t: {
                color: '#D1EAFF',
                fontSize: 36,
                lineHeight: 53,
              },
              n: {
                color: '#D1EAFF',
                fontSize: 18,
              },
            },
          },
        },
        data: list,
      },
    ],
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #60aff8;
  border: none;
  align-items: center;
  padding: 0;
  margin-right: 10px;
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
}
.leftBottom {
  width: 100%;
  // height: 100%;
  height: calc(100% - 45px);
  box-sizing: border-box;
  position: relative;
  color: #b5bcc2;

  font-size: 16px;
  .top {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-around;
    top: 75px;
    left: 0;
    z-index: 1;
    color: #fff;
    .topL {
      display: flex;
      font-size: 18px;
      &::before {
        content: '';
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #1cc9e0;
      }
    }
    .topR {
      display: flex;
      font-size: 18px;

      &::before {
        content: '';
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #bb2025;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-around;
    color: #fff;

    bottom: 20px;
    left: 0;

    z-index: 1;
    .btmL {
      display: flex;
      font-size: 18px;

      &::before {
        content: '';
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #97a1ac;
      }
    }
    .btmR {
      display: flex;
      font-size: 18px;

      &::before {
        content: '';
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #ffd037;
      }
    }
  }
}
</style>>